<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="日期">
      <el-date-picker v-model="valueData" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyyMMdd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-s-data" @click="count">统计</el-button>
      </el-form-item>
    </el-form>
    <div style="width: 70%; height: 1500px; margin: 0 auto; margin-top: 3%">
      <div id="histogram" style="width: 100%; height:100%;"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { lymydtj } from "@/api/archive/statistics/ndStatistics/index.js";
export default {
  data() {
    return {
      queryParams: {
        startTime: undefined,
        endTime: undefined,
      },
      valueData:undefined
    }
  },
  created() {
    this.getList();
    this.getHistogram();
  },
  methods: {

    // 获取列表数据
    getList() {
      lymydtj(this.queryParams).then(response => {
        this.tableData = response.data
        this.getHistogram(this.tableData)
      })
    },
    handleStartYearChange() {
      if(this.queryParams.endTime < this.queryParams.startTime) {
        this.queryParams.startTime = this.queryParams.endTime;
      }
    },
    handleEndYearChange() {
      if(this.queryParams.endTime < this.queryParams.startTime) {
        this.queryParams.endTime = this.queryParams.startTime;
      }
      if (!this.queryParams.startTime) {
        this.queryParams.startTime = this.queryParams.endTime;
      }
    },
    count() {
      var that=this;
      console.log(this.valueData);
      if(this.valueData!=undefined){
        this.queryParams.startTime=this.valueData[0];
        this.queryParams.endTime=this.valueData[1]
      }else{
        this.queryParams.startTime=undefined;
        this.queryParams.endTime=undefined;
      }
   
      this.getList()
    },
    // 制作柱状图
    getHistogram(data) {

      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById('histogram'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '利用满意度统计',
            // subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          // legend: {
          //     orient: 'vertical',
          //     left: 'left',
          //     bottom:'20px'
          // },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 120,
            bottom: 20,

          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '40%',
              center: ['50%', '20%'],
              data: data,
              // data: [
              //     { value: 1048, name: 'Search Engine' },
              //     { value: 735, name: 'Direct' },
              //     { value: 580, name: 'Email' },
              //     { value: 484, name: 'Union Ads' },
              //     { value: 300, name: 'Video Ads' }
              // ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用配置绘制柱状图
        myChart.setOption(option);
      })
    }
  }
}
</script>